<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>01.bootstrapv4.0的栅格布局</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-grid.min.css">
        <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    </head>
    <body>
        <!-- 容器 -->
        <div class="container">
            <!-- 栅格系统. bootstrap4的布局，固定的布局，不会随着屏幕的变化而改变布局的样子 -->
            <div class="row">
                <div class="col-10 offset-1 text-center lead"> 江南逢李龟年</div>
                <div class="col-6 border border-info text-center">岐王宅里寻常见</div>
                <div class="col-6 border border-danger text-center">崔九堂前几度闻</div>
                <div class="col-6 border border-dark text-center">正是江南好风景</div>
                <div class="col-6 border border-primary text-center">落花时节又逢君</div>
            </div>

            <!-- 大小屏幕设置了多种情况，设置多种情况，会随着屏幕大小的变换而改变布局的样式, 感觉这种个就不好控制了 -->
            <div class="row">
                <div class="col-10 offset-1 text-center lead"> 登鹳雀楼</div>
                <div class="col-sm-4 col-lg-6 col-xl-10 bg-danger text-center">白日依山尽</div>
                <div class="col-sm-4 col-lg-6 col-xl-10 bg-info text-center">黄河入海流</div>
                <div class="col-sm-4 col-lg-6 col-xl-10 bg-primary text-center">欲穷千里目</div>
                <div class="col-sm-4 col-lg-6 col-xl-10 bg-success text-center">更山一层楼</div>
            </div>
        </div>
        <!-- 引入js文件 -->
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery-3.4.1.js"></script>
        <script src="js/popper.min.js"></script>
    </body>
</html>

